<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>

<style>

    .content{

        width: 100%;
        height: 1200px;
        background-color: chartreuse;

    }



</style>
<body>



<div id="app">


</div>


<script>


    var Vmian = {


        template:`

        <div class="content">

         我是一个兵;

         <ul>
         <li v-for="(item,index) in ports2">

         <h2> {{item.name}} </h2>
         <h3> {{item.age}} </h3>

        </li>


         </ul>


         </div>

        `,
        components:{

        },
        props:['ports2']
    }


    new Vue({

        el:"#app",
        // template:`<Vmian :ports2 = 'ports1' /> `,
        template:`<Vmian :ports2 = 'ports1'></Vmian>`,
        data:function () {
            return{

                ports1:[
                    {name:"xingweixin",age:27},
                    {name:"fengmengyue",age:26}


                ]


            }
        },

       components:{

           Vmian

       }
    });





</script>





</body>
</html>